<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h1>用户注册</h1>
        <form >
            用户名:
            <input type="text" id="username" name="username" placeholder="用户名不能为空且长度在4-16">
            <span class="tip" id="name_msg"></span><br>

            手机号:
            <input type="text" id="phone" name="phone" placeholder="手机号不能为空且为十一位">
            <span class="tip" id="phone_msg"></span><br>
            <br>

            <input type="submit" value="提交" class="btn">
            <input type="reset" value="重置" class="btn">

        </form>
    </div>

<script>
    //需求：表单校验--用户名：长度在4-16位：手机号：长度11位

</script>
</body>
</html>